<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='UTF-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
    <title>星星</title>
    <style>
        *{margin: 0;padding: 0;}
        span{
            float: left;
            width: 27px;
            height: 27px;
            background: url(./pic/cts-star.gif) no-repeat;
            cursor: pointer;
        }
        
    </style>
    <script src="./js/jquery.min.js"></script>
    <script>

        $(function(){
            var index;
            $('span').on({
                'mouseenter':function(){
                    var i = $(this).index();
                    $('span').css('backgroundPosition','0 0').filter(function(){
                        return $(this).index() <= i;
                    }).css('backgroundPosition','0 -29px')
                    $('p').html(i + 1 + '星');
                },
                'mouseleave' : function(){
                    $('span').css('backgroundPosition','0 0').filter(function(){
                        return $(this).index() <= index;
                    }).css('backgroundPosition','0 -29px')
                    $('p').html((index + 1 ? index + 1 + '星' : ''));
                },
                'click' : function(){
                    index = $(this).index();
                }
            })
        })

    </script>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <br>
    <br>
    <p></p>
</body>
</html>